/**
 * 流程标题右侧按钮区
 */
import React, { useEffect, useState, useRef, useLayoutEffect } from 'react';
import { reloadField, useForm } from "../../framework/common/context/metadata-context";
import request from "../../framework/common/utils/request";
import {getQuery, buildUrl ,openWin} from "../../framework/common/utils"
import myMessage from "../../framework/common/utils/message"
import { message, Modal } from "antd";
import qs from "qs"
import clsx from "clsx";
import ProcessInfo from "./ProcessInfo1.js";
import ModalCirculateProcess from "./ModalCirculateProcess.js"//传阅弹出框
import ModalUrgent from "./ModalUrgent.js"//催办弹出框
import ModalWithdraw from "./ModalWithdraw.js"//撤回弹出框
import ModalDataChange from "./ModalDataChange.js"//修改业务数据弹出框
import cloneDeep from "lodash/cloneDeep";
import getInitiateFormData, {getApproveDraftData} from '../../framework/common/utils/getInitiateFormData';//获取流程表单数据
// import eventBus from '../../framework/common/eventBus';
// import { deleteGroupRow, revalidateSubGroup, triggerGroupRowRule, triggerSqlAPIValueCaculate } from '../../framework/common/rule/setRuleResult';
import jQuery  from 'jquery'
import { formReload } from '../../framework/common/rule/setRuleResult';
import { print, viewBusiness, showDetailContent, saveDraft, dataChange, updateNextNodeUrl } from './businessBtnUtils';//业务按钮公共方法
import eventBus from '../../framework/common/eventBus';

export default function({}){
    const form = useForm().root;
    const { data: tplData, params, urlPrefix,csrfToken} =form;

    const businessButtons = tplData.BusinessButtons;//流程标题右侧按钮区信息
    const [todoNodeInfo, setTodoNodeInfo] = useState(tplData.TodoNodeInfo);//上一条 下一条 代办

    let circulateRef = useRef(null);
    let urgentRef = useRef(null);
    let withdraRef = useRef(null);
    
    useEffect(()=>{
        // 异步请求todo信息
        var requestData = {
            node_id: tplData.NodeInfo.node_id,
            user_id: tplData.CurUserGUID
        };
        if (tplData.ProcessInfo.ProcessStatus == -4 || tplData.ProcessInfo.ProcessStatus == -3) {
            updateNextNodeUrl({
                tplData: tplData,
                setTodoNodeInfo: setTodoNodeInfo
            });//更新上一条下一条代办信息
        } else {
            request({
                url: "/flowinstance/approval/get-current-todo?" + qs.stringify(requestData), //根据当前流程获取上一条/下一条流程链接
                method: "GET"
            }).then(function (result) {
                if (result.code == 1) {
                    tplData.TodoNodeInfo = result.data;
                    updateNextNodeUrl({
                        tplData: tplData,
                        setTodoNodeInfo: setTodoNodeInfo
                    });//更新上一条下一条代办信息
                }
            }).catch(function () {
                
            });
        }
    },[])

    //业务按钮点击事件
    function handleBusinessBtn({
        tplData,
        params,
        urlPrefix,
        btnInfo
    }){
        let btnCode = btnInfo.OperationCode;
        switch (btnCode){
            case "Print"://打印
                print({
                    tplData: tplData,
                    params: params,
                    urlPrefix: urlPrefix
                });
                break;
            case "Circulate"://传阅
                circulateRef.current.showModal();
                break;
            case "Urgent"://催办
                urgentRef.current.showModal();
                break;
            case "Withdraw"://撤回
                withdraRef.current.showModal();
                break;
            case "ViewBusiness"://查看业务数据
                viewBusiness({
                    btnInfo: btnInfo,
                    tplData: tplData,
                    params: params
                });
                break;
            case "DetailContent"://流程详情
                showDetailContent({
                    tplData: tplData,
                });
                break;
            case "Draft"://保存草稿
                saveDraft({
                    tplData: tplData,
                    params: params,
                    urlPrefix: urlPrefix,
                    isApproveSave: false,//保存草稿
                    showConfirm: true,
                    spinTip: "保存草稿中"//全局遮罩提示语
                });
                break;
            case "ApproveDraft":
                saveDraft({
                    tplData: tplData,
                    params: params,
                    urlPrefix: urlPrefix,
                    isApproveSave: true,//审批中暂存
                    showConfirm: true,
                    spinTip: "暂存中"//全局遮罩提示语
                });
                break;
            case "DataChange": //修改业务数据
                eventBus.publish('screen.lock', {
                    spinning: true
                });//全局遮罩
                dataChange({
                    tplData: tplData,
                    params: params,
                    urlPrefix: urlPrefix,
                    form: form
                });
                break;
            default:
                console.log('未实现的按钮事件', btnCode);
        }
    }

    //返回更多按钮dom
    function GetMoreButtonList(data){

        if(data.MoreButtonList && data.MoreButtonList.length){
            if(data.MoreButtonList.length == 1 && data.BusinessButtonList.length == 1){
                return <>
                    <li className="js-detailProcessList hoverItem businessBtn" 
                        onClick={()=>{
                            handleBusinessBtn({
                                tplData: tplData,
                                params: params,
                                urlPrefix: urlPrefix,
                                btnInfo: data.MoreButtonList[0]
                            })
                        }}
                        id={data.MoreButtonList[0].OperationCode} data-btnid={data.MoreButtonList[0].Id} data-businessbtntype={data.MoreButtonList[0].OperationCode}>
                        <i className={clsx("iconfont", data.MoreButtonList[0].ButtonIcon)}></i>
                        <div className="tips_content min-w-80px -right-12px">
                            {data.MoreButtonList[0].ButtonName}
                        </div>
                        <div className="arrows_wrap">
                            <span className="after"></span>
                            <span className="before"></span>
                        </div>
                    </li>
                </>
            }else{
                return <>
                    <li className="js-detailProcessList hoverItem businessBtn">
                        <i className="iconfont icon-gengduo"></i>
                        <div className="tips_content_wrap">
                            <div className="tips_content more_wrap">
                                {
                                    data.MoreButtonList.map(function(item, i){
                                        return <span key={i} 
                                                        onClick={()=>{
                                                            handleBusinessBtn({
                                                                tplData: tplData,
                                                                params: params,
                                                                urlPrefix: urlPrefix,
                                                                btnInfo: item
                                                            })
                                                        }}
                                                        id={item.OperationCode} data-businessbtntype={item.OperationCode} data-btnid={item.Id}>{item.ButtonName}</span>
                                    })
                                }
                                {
                                    data.BusinessButtonList.length >= 2
                                    && <>
                                        <span 
                                            onClick={()=>{
                                                        handleBusinessBtn({
                                                            tplData: tplData,
                                                            params: params,
                                                            urlPrefix: urlPrefix,
                                                            btnInfo: {OperationCode: "DetailContent"}
                                                        })
                                                    }}
                                        >流程详情</span>
                                    </>
                                }
                            </div>
                            <div className="arrows_wrap">
                                <span className="after"></span>
                                <span className="before"></span>
                            </div>
                        </div>
                    </li>
                </>
            }
        }else{
            return null;
        }
    }
    
    return <>
        <div className="main_buttom_wrap">

            <ModalCirculateProcess ref={circulateRef} des="传阅弹出框"></ModalCirculateProcess>
            <ModalUrgent ref={urgentRef} des="催办弹出框"></ModalUrgent>
            <ModalWithdraw ref={withdraRef} des="撤回弹出框"></ModalWithdraw>
            <ModalDataChange des="修改业务数据弹出框"></ModalDataChange>

            <ul className="business-button">
                {/*业务按钮优先*/}
                {
                    businessButtons.BusinessButtonList.length > 0
                    && businessButtons.BusinessButtonList.map(function(item, i){
                        return <li key={i} aaa="123" 
                                onClick={()=>{
                                    handleBusinessBtn({
                                        tplData: tplData,
                                        params: params,
                                        urlPrefix: urlPrefix,
                                        btnInfo: item
                                    })
                                }} 
                                id={item.OperationCode} 
                                data-businessbtntype={item.OperationCode} 
                                data-btnid={item.Id} 
                                className="hoverItem businessBtn">
                                    <i className={clsx("iconfont", item.ButtonIcon)}></i>
                                    <div className={clsx("tips_content", item.OperationCode)}>{item.ButtonName}</div>
                                    <div className="arrows_wrap">
                                        <span className="after"></span>
                                        <span className="before"></span>
                                    </div>
                                </li>
                    })
                }
                {/*无更多按钮，且业务按钮小于2个，则放在最后*/}
                {
                    (!businessButtons.MoreButtonList || businessButtons.MoreButtonList.length == 0 || businessButtons.BusinessButtonList.length < 2)
                    && <>
                        <li className="js-detailProcessList hoverItem businessBtn">
                            <i className="iconfont icon-xiangqing"></i>
                            <div className="tips_content detailContent">
                                <ProcessInfo des="流程详情" tplData={tplData}></ProcessInfo>
                            </div>
                            <div className="arrows_wrap">
                                <span className="after"></span>
                                <span className="before"></span>
                            </div>
                        </li>
                    </>
                }

                {/*更多按钮*/}
                {GetMoreButtonList(businessButtons)}

                {
                    (todoNodeInfo.PrevNodeUrl || todoNodeInfo.NextNodeUrl)
                    &&<>
                        <li className="cutting-line"></li>
                    </>
                }
                {
                    todoNodeInfo.PrevNodeUrl
                    && <>
                        <li id="PrevNode" className="hoverItem">
                            <a className="iconfont icon-shangyige" href={todoNodeInfo.PrevNodeUrl}>
                                <div className="tips_content PrevNode">上一条待办</div>
                                <div className="arrows_wrap">
                                    <span className="after"></span>
                                    <span className="before"></span>
                                </div>
                            </a>
                        </li>
                    </>
                }
                {
                    todoNodeInfo.NextNodeUrl
                    && <>
                        <li id="NextNode" className="hoverItem">
                            <a className="iconfont icon-xiayige" href={todoNodeInfo.NextNodeUrl}>
                                <div className="tips_content NextNode">下一条待办</div>
                                <div className="arrows_wrap">
                                    <span className="after"></span>
                                    <span className="before"></span>
                                </div>
                            </a>
                        </li>
                    </>
                }
            </ul>
        </div>
    </>
}